<template>
  <!-- 头部滚动隐藏的导航 -->
  <div class="box" @scroll="togg">
    <div class="home">
      <div class="w1" v-show="show">
        <div class="tx">
          <img src="../../assets/img/toux.jpg" />
        </div>
      </div>
      <!-- 轮播图组件 -->
      <Swiper />
      <!-- 中间导航组件 -->
      <Nav />
      <!-- 全民砍价 --> 
      <Kanjia />
      <!-- 精选专题 -->
      <Zhuanti />
      <!-- 人气推荐 -->
      <div class="q2"></div>
      <van-nav-bar
        title="人气推荐"
        right-text="人气推荐"
        @click-right="onClickRight"
      />
      <Renqi />
      <!-- 底部导航组件 -->
      <Button />
    </div>
    <div class="iconfont icon-fanhuidingbu" @click="fanhui" v-show="fan"></div>
  </div>
</template>
<script>
import Swiper from "../../components/swiper/swiper";
import Button from "../../components/nav/button-nav";
import Nav from "../../components/nav/nav";
import Kanjia from "../../components/list/kanjia";
import Zhuanti from "../../components/list/zhuanti";
import Renqi from "../../components/list/ren";
export default {
  components: {
    Swiper,
    Button,
    Nav,
    Kanjia,
    Zhuanti,
    Renqi,
  },
  data() {
    return {
      show: false,
      fan: false,
    };
  },
  methods: {
    togg(e) {
      if (e.target.scrollTop > 360) {
        this.show = true;
      } else {
        this.show = false;
      }
      if (e.target.scrollTop > 900) {
        this.fan = true;
      } else {
        this.fan = false;
      }
    },
    fanhui() {
      var box = document.getElementsByClassName("box")[0];
      box.scrollTop = 900;
      setTimeout(function () {
        box.scrollTop = 800;
      }, 500);
      setTimeout(function () {
        box.scrollTop = 700;
      }, 600);
      setTimeout(function () {
        box.scrollTop = 600;
      }, 700);
      setTimeout(function () {
        box.scrollTop = 500;
      }, 800);
      setTimeout(function () {
        box.scrollTop = 400;
      }, 900);
      setTimeout(function () {
        box.scrollTop = 300;
      }, 1000);
      setTimeout(function () {
        box.scrollTop = 200;
      }, 1100);
      setTimeout(function () {
        box.scrollTop = 100;
      }, 1200);
      setTimeout(function () {
        box.scrollTop = 0;
      }, 1300);
    },
    onClickRight() {
      this.$router.push({ path: "/renqi" });
    },
  },
};
</script>
<style  scoped>
.q2 {
  width: 100%;
  height: 15px;
  margin-top: 6px;
  background: rgb(245, 245, 245);
}
.box {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.home {
  width: 100%;
  height: 200vh;
}
.w1 {
  width: 100%;
  height: 50px;
  background: lightcyan;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tx {
  width: 36px;
  height: 36px;
  border-radius: 5px;
}
.tx img {
  width: 100%;
  border-radius: 5px;
}
.iconfont {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 60px;
  right: 0px;
  border-radius: 50%;
  font-size: 50px;
  color: red;
}
</style>